<template>
  <div class="hello">
    <el-space alignment="start" wrap>
      <el-card class="box-card">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px">
          <el-form-item label="Http" prop="httpBaseUrl">
            <el-input v-model="ruleForm.httpBaseUrl" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="WebSocket" prop="wsBaseUrl">
            <el-input v-model="ruleForm.wsBaseUrl" type="text" autocomplete="off"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>一言</span>
            <el-button type="primary" circle @click="loadOneWord">刷新</el-button>
          </div>
        </template>
        <div class="textArea">
          <div v-for="word in words" :key="word.uuid" class="text">
            <span>{{word.hitokoto}}</span>
            <el-divider content-position="right">{{word.from}}</el-divider>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>每30s刷新一下</span>
            <el-button type="primary" circle @click="sendMsg">刷新</el-button>
          </div>
        </template>
        <div class="textArea">
          <div v-for="item in list" :key="item.text" class="text">
            <span>{{item.text}}</span>
            <el-divider content-position="right">{{item.time}}</el-divider>
          </div>
        </div>
      </el-card>
    </el-space>
  </div>
</template>

<script>
import TdWebSocket from "@/plugins/TdWebSocket";

export default {
  name: 'HelloWorld',
  data() {
    return {
      ruleForm: {
        httpBaseUrl: "",
        wsBaseUrl: "",
      },
      httpBaseUrl: "http://web.test.itmtr.cn",
      wsBaseUrl: "ws://ws.test.itmtr.cn",
      words: [],
      list: [],
      wb: null
    }
  },
  mounted() {
    this.loadStorage();
    this.loadOneWord();
    this.initTdWebSocket();
  },
  methods: {
    submitForm() {
      localStorage.setItem('wsBaseUrl', this.wsBaseUrl = this.ruleForm.wsBaseUrl);
      localStorage.setItem('httpBaseUrl', this.httpBaseUrl = this.ruleForm.httpBaseUrl);
      this.initTdWebSocket();
    },
    loadStorage() {
      if (localStorage.getItem('wsBaseUrl')) {
        this.wsBaseUrl = localStorage.getItem('wsBaseUrl');
      }
      if (localStorage.getItem('httpBaseUrl')) {
        this.httpBaseUrl = localStorage.getItem('httpBaseUrl');
      }
      this.ruleForm = {
        wsBaseUrl: this.wsBaseUrl,
        httpBaseUrl: this.httpBaseUrl,
      }
    },
    initTdWebSocket() {
      const that = this;
      if (this.wb) {
        this.wb.close();
      }
      this.wb = TdWebSocket(this.wsBaseUrl + "/websocket", {
        onMessage(msg) {
          that.list.push({
            text: msg,
            time: new Date().toLocaleTimeString()
          });
        },
        onOpen() {
          that.sendMsg();
        }
      });
    },
    loadOneWord() {
      this.$axios.get(this.httpBaseUrl + "/api").then(data => {
        this.words.push(data);
      });
    },
    sendMsg(){
      this.wb.sendMsg("test");
    }
  }
}
</script>

<style scoped>

.card-header {
  display: flex;
  justify-content: space-between;
}

.textArea {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

.text {
  font-size: 14px;
}

.box-card {
  width: 480px;
  margin: 10px;
}
</style>
